import { requestUrl } from "@/api/data";
import { deepClone, handleEvent, handleStyle, } from "./index"
import store from "@/store"
export const comMixin = {
  props: {
    styleObj: {
      type: Object,
      default: () => { }
    },
    // 父级字体样式
    font: {
      type: Object,
      default: () => { }
    },
    // 用于保存接口相关数据
    dataObj: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return { resData: [], loading: false };
  },
  computed: {
    dataType() {
      return this.dataObj?.type;
    },

    newStyle() {
      return handleStyle(this.styleObj, this.font)
    },
    attrs() {
      const attrs = deepClone(this.$attrs)
      delete attrs.styleObj // 需要删除attrs中的样式属性，避免传给子级
      return attrs
    },
    clearable() {
      return this.$attrs.clearable && this.value && !this.$attrs.onlyShow && !this.$attrs.disabled && !this.$attrs.readonly
    },
    props() {
      return this.dataObj?.props || {}
    },
    refresh() {
      return store.state.app.refresh
    },
    activeId() {
      return store.state.app.activeId
    },
  },
  created() {
    handleEvent('onCreated', "", this.$attrs, this)
  },
  mounted() {
    handleEvent('onMounted', "", this.$attrs, this)
    this.init()
  },
  watch: {
    dataType() {
      this.init()
    },
    refresh() {
      if (this.activeId == this.attrs?.__config__?.formId)
        this.init()
    },
  },
  methods: {
    // 点击事件
    onClick() {
      handleEvent('onClick', "", this.$attrs, this)
    },
    // 在 Input 失去焦点时触发
    onBlur(value) {
      handleEvent('onBlur', value, this.$attrs, this)
    },
    // 在 Input 获得焦点时触发
    onFocus(value) {
      handleEvent('onFocus', value, this.$attrs, this)
    },
    // 在 Input 值改变时触发
    onInput(value) {
      handleEvent('onInput', value, this.$attrs, this)
    },
    // 点击清空按钮时触发
    onClear(value) {
      handleEvent('onClear', value, this.$attrs, this)
    },
    // 绑定值或选中项变化时触发
    onChange(value) {
      handleEvent('onChange', value, this.$attrs, this)
    },
    // 点击确认按钮时触发
    onConfirm(value) {
      handleEvent('onConfirm', value, this.$attrs, this)
    },
    init() {
      if (!this.dataType) return
      this.resData = [];
      if (this.dataType == "static") {
        this.resData = this.dataObj.value;
        this.handleSuccess(this.resData)
      } else if (this.dataType == "dynamic") {
        this.loadData();
      }
    },
    loadData(data) {
      // 请求参数
      const requestData = deepClone({ ...this.dataObj.request, ...data })
      this.loading = true;
      requestUrl(this.dataObj.url, this.dataObj.method, requestData, this.dataObj.reDataType)
        .then(
          (res) => {
            this.resData = res.result;
            if (this.dataObj.response) {
              const func = new Function("response", this.dataObj.response);
              func(res.result)
              // 加载成功
              this.handleSuccess(res.result)
            }
            this.loading = false;
          }
        ).catch((err) => {
          // 加载失败
          this.handleError(err)
          if (this.dataObj.error) {
            const func = new Function("error", this.dataObj.error);
            func(err);
          }
          this.loading = false;
        });
    },
    // 对数据进行处理
    handleSuccess(res) { },
    handleError(err) { },
    // 刷新
    handleRefresh() {
      this.loading = true
      this.$nextTick(() => {
        this.loading = false
      })
    }
  }
};